<template>
  <div class="DataSourceList">
    <el-row style="text-align: left; margin-bottom: 10px">
      <el-button size="small" type="primary" @click="AddDictClass()"
        >新增分类</el-button
      >
    </el-row>
    <el-row>
      <el-table border size="small" style="width: 100%;" height="calc(100vh - 230px)">
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分类维护抽屉 -->
    <el-drawer
      title="添加数据源分类"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="名称：">
              <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注:">
              <el-input type="textarea" v-model="form.desc" autosize></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="启用：" style="text-align: left">
              <el-switch v-model="form.Enable"></el-switch
            ></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item>
              <el-button size="small" type="primary" @click="GetFormData()">确 定</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item>
              <el-button size="small" @click="handleClose()">取 消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import request from '../utils/request'

export default {
  name: 'DataSourceList',
  data () {
    return {
      drawer: false,
      direction: 'rtl',
      form: {
        name: '',
        desc: '',
        Enable: false
      }
    }
  },
  methods: {
    AddDictClass () {
      this.drawer = true
    },
    handleClose () {
      this.drawer = false
    },
    GetFormData () {
      console.log(this.form)
    }
  },
  created () {
    this.service
      .get('/dict/FieldClassDict/Get', this.form)
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
</script>
<style lang="scss" scoped>
.DataSourceList{
  padding-top: 20px;
}
</style>
